<template>
  <div class="bottom">
    <div class="operate">
      <div class="icon">
        <i :class="playmodeicon" @click="changemode"></i>
      </div>
      <div class="icon">
        <i
          class="icon-prev"
          :class="{ disable: !canplayref }"
          @click="playpre()"
        ></i>
      </div>
      <div class="icon">
        <i :class="playicon" @click="changeplay()"></i>
      </div>
      <div class="icon">
        <i
          class="icon-next"
          :class="{ disable: !canplayref }"
          @click="playnext()"
        ></i>
      </div>
      <div class="icon">
        <i
          class="icon-not-favorite"
          v-if="!iscollect"
          @click="changecollect()"
        ></i>
        <i v-else class="icon-favorite" @click="changecollect()"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { watch, computed, nextTick, ref } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'Operate',
  props: {
    currentsong: {
      type: Object,
      default: () => ({})
    },
    audioref: Object
  },

  setup (props, { emit }) {
    // vuex
    const store = useStore()
    const playing = computed(() => store.state.playing)
    const iscollect = computed(() => store.getters.iscollect)
    const playicon = computed(() => {
      if (playing.value) {
        return 'icon-pause'
      } else {
        return 'icon-play'
      }
    })
    // 播放模式
    const playmode = computed(() => store.state.playmode)
    const playmodeicon = computed(() => {
      switch (playmode.value) {
        case 0:
          return 'icon-sequence'
        case 1:
          return 'icon-random'
        case 2:
          return 'icon-loop'
        default:
          return ''
      }
    })
    // 最底部操作
    watch(
      () => props.currentsong,
      () => {
        // eslint-disable-next-line
        props.audioref.src = props.currentsong.url
        store.commit('toplaying')
        canplayref.value = false
        nextTick(() => {
          props.audioref.play()
        })
      }
    )
    // 暂停和播放
    const changeplay = () => {
      store.commit('changeplaying')
    }
    // 改变播放模式
    const changemode = () => {
      store.commit('changemode')
    }
    // 播放结束后
    const musicend = () => {
      store.commit('playnext')
    }
    // 下一首播放
    const playnext = () => {
      if (!canplayref.value) {
        return
      }
      store.commit('playnext')
    }
    // 上一首
    const playpre = () => {
      if (!canplayref.value) {
        return
      }
      store.commit('playpre')
    }
    // 歌曲数据缓冲完毕
    const canplayref = ref(false)
    const canplay = () => {
      canplayref.value = true
    }
    // 添加收藏
    const changecollect = () => {
      store.commit('changecollect', props.currentsong)
    }

    return {
      changeplay,
      playicon,
      playmodeicon,
      changemode,
      musicend,
      playnext,
      playpre,
      canplay,
      canplayref,
      changecollect,
      iscollect
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  position: relative;
  bottom: 157px;
  & > .operate {
    display: flex;
    width: 100%;
    position: absolute;
    & > .icon {
      flex: 1;
      font-size: 30px;
      color: #ffcd32;
      height: 50px;
      padding-top: 10px;
      & > .disable {
        color: $color-theme-d;
      }
      &:nth-child(-n + 2) {
        text-align: right;
      }
      &:nth-child(n + 4) {
        text-align: left;
      }
      &:nth-child(3) {
        text-align: center;
        font-size: 40px;
        padding-top: 5px;
      }
    }
  }
}
</style>
